<template>
	<view>
		<view class="form">

			<view class="form-item">
				<view class="form-item-label">配偶名字<text>*</text></view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="配偶名字" placeholder-class="input-ac" v-model="form.spouse_name"/>
					</view>
				</view>
			</view>
			<!-- <view class="form-item">
				<view class="form-item-label">配偶性别 <text>*</text></view>
				<picker mode="selector" :range="sexList" range-key="label" @change="e => change('spouse_sex',e)">
					<view class="form-item-rig">
						<view class="form-item-input">
							<input type="text" placeholder="选择性别" placeholder-class="input-ac" disabled
								:value="getName(form.spouse_sex,sexList)" />
							<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
						</view>
					</view>
				</picker>
						
			</view> -->
			<view class="form-item">
				<view class="form-item-label">结婚日期<text>*</text></view>
				<view class="form-item-rig">
					<div class="form-item-rig-more">
					
						<view style="width: 150rpx;flex: unset">
							<picker mode="selector" :range="timeEnum" range-key="label"
								@change="e => change('spouse_marry_type',e)">
								<view class="form-item-input">
									<input type="text" placeholder="农历" placeholder-class="input-ac" disabled
										:value="getName(form.spouse_marry_type,timeEnum)" />
									<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
								</view>
							</picker>
						</view>
						
						<view style="flex: 1;">
							<DateValue v-model="form.spouse_marry_time">
								<view class="form-item-input">
									<input type="text" placeholder="请选择结婚日期" placeholder-class="input-ac" disabled
										:value="form.spouse_marry_time" />
									<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
								</view>
							</DateValue>
						</view>
					</div>
			
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">配偶出生日期 <text>*</text></view>
				<view class="form-item-rig">
					<div class="form-item-rig-more">
						<view style="width: 240rpx;flex: unset">
							<picker mode="selector" :range="timeEnum" range-key="label"
								@change="e => change('spouse_birth_time_type',e)">
								<view class="form-item-input">
									<input type="text" placeholder="农历" placeholder-class="input-ac" disabled
										:value="getName(form.spouse_birth_time_type,timeEnum)" />
									<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
								</view>
							</picker>
						</view>
			
						<view>
							<DateValue v-model="form.spouse_birth_year">
								<view class="form-item-input">
									<input type="text" placeholder="日期" placeholder-class="input-ac" disabled
										:value="form.spouse_birth_year" />
									<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
								</view>
							</DateValue>
						</view>
						<view>
							<picker mode="time" @change="changeTime">
								<view class="form-item-input">
									<input type="text" placeholder="时间" placeholder-class="input-ac" disabled
										:value="spouse_birth_time" />
									<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
								</view>
							</picker>
						</view>
			
					</div>
			
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">配偶家庭地址</view>
				<view class="form-item-rig">
					<picker mode="region" @change="changeAddress">
						<view class="form-item-input">
							<input type="text" placeholder="请选择省、市、区" placeholder-class="input-ac" disabled
								:value="getAddress" />
							<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
						</view>
					</picker>
				</view>
				
			</view>
			<view class="form-item">
				<view class="form-item-label">配偶家庭详细地址</view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="请输入小区、写字楼、门牌号等" placeholder-class="input-ac" v-model="form.spouse_address_info" />
					</view>
				</view>
			</view>
			<view class="form-item" v-if="genealogy.sex === 1">
				<view class="form-item-label">头像 <text class="form-item-label-subTitle">(配偶照片)</text><text>*</text></view>
				<view class="form-item-rig">
					<view class="form-item-rig-upload">
						<view class="form-item-rig-upload-add flex-center" @click="upload('spouse_avatar')"
							v-if="!form.spouse_avatar">
							<image src="/static/photo-b-照相.png" mode=""></image>
							上传图片
						</view>
						<image :src="form.spouse_avatar" mode="aspectFill" v-else @click="upload('spouse_avatar')"></image>
					</view>
				</view>
			</view>
			
		</view>
		<view class="form-btn flex-center" @click="submit">确定</view>
		<u-gap height="30" bgColor="#F6F1E7"></u-gap>
	</view>
</template>

<script>
	import DateValue from '@/components/date/date.vue'
	import {
		uploadImg
	} from '@/common/upload.js'
	import {
		genealogyDataUpdateHttp,
		genealogyDataInfoHttp
	} from '@/common/http/api.js'
	export default {
		components: {
			DateValue
		},
		data(){
			return {
				form:{
					spouse_name: '',
					spouse_sex: '',
					spouse_avatar: '',
					spouse_marry_type: 1,
					spouse_marry_time: '',
					
					spouse_birth_time_type: 1,
					spouse_birth_year: '',
					spouse_birth_time: '',
					
					spouse_address_province: '',
					spouse_address_city: '',
					spouse_address_area: '',
					spouse_address_info: '',
					spouse_address_street: ''
				},
				spouse_birth_time: '',
				sexList: [{
						value: 1,
						label: '男'
					},
					{
						value: 2,
						label: '女'
					}
				],
				timeEnum: [
					{
						value: 1,
						label: '农历'
					},
					{
						value: 2,
						label: '阳历'
					}
				],
				id: '',//成员
				genealogy: ''
			}
		},
		computed: {
			getAddress() {
				let address = ''
				if (this.form.spouse_address_province) {
					address = this.form.spouse_address_province + '-' + this.form.spouse_address_city + '-' + this.form
						.spouse_address_area
				}
				return address
			}
		},
		onLoad(e) {
			this.id = e.id 
			genealogyDataInfoHttp({type: 2,id: e.id}).then(res=>{
				this.genealogy = res.data
				this.form.spouse_name = res.data.spouse_name
				this.form.spouse_sex = res.data.spouse_sex
				this.form.spouse_avatar = res.data.spouse_avatar
				this.form.spouse_marry_type = res.data.spouse_marry_type
				this.form.spouse_marry_time = res.data.spouse_marry_time
				this.form.spouse_birth_time_type = res.data.spouse_birth_time_type
				this.form.spouse_birth_year = res.data.spouse_birth_year
				this.form.spouse_birth_time = res.data.spouse_birth_time
				this.spouse_birth_time = res.data.spouse_birth_time
				this.form.spouse_address_province = res.data.spouse_address_province
				this.form.spouse_address_city = res.data.spouse_address_city
				this.form.spouse_address_area = res.data.spouse_address_area
				this.form.spouse_address_info = res.data.spouse_address_info
				this.form.spouse_address_street = res.data.spouse_address_street
			})
		},
		
		methods:{
			upload(name) {
				uploadImg().then(res => {
					console.log('res', res)
					this.form[name] = res.data.url
				})
			},
			changeAddress(e) {
				console.log('e', e)
				this.form.spouse_address_province = e.detail.value[0]
				this.form.spouse_address_city = e.detail.value[1]
				this.form.spouse_address_area = e.detail.value[2]
			},
			getName(val, arr) {
				let str = ''
				try {
					str = arr.find(i => i.value === val).label
				} catch (e) {
			
				}
				return str
			},
			change(name, e) {
				console.log('e', e)
				this.form[name] = this.sexList[e.detail.value].value
			},
			changeTime(e) {
				console.log('e', e)
				this.form.spouse_birth_time = e.detail.value
				this.spouse_birth_time = e.detail.value + ' ' + this.convertTimeToChinese(e.detail.value)
			},
			convertTimeToChinese(time) {
				const timeMap = {
					'23': '子',
					'00': '子',
					'01': '丑',
					'02': '丑',
					'03': '寅',
					'04': '寅',
					'05': '卯',
					'06': '卯',
					'07': '辰',
					'08': '辰',
					'09': '巳',
					'10': '巳',
					'11': '午',
					'12': '午',
					'13': '未',
					'14': '未',
					'15': '申',
					'16': '申',
					'17': '酉',
					'18': '酉',
					'19': '戌',
					'20': '戌',
					'21': '亥',
					'22': '亥'
				};
				const [hour, minute] = time.split(':');
				return timeMap[hour];
			},
			async submit() {
				await this.$mValidate(
					[
						{
							require: true,
							key: 'spouse_name',
							message: '请输入配偶名字'
						},
						
						{
							require: true,
							key: 'spouse_marry_time',
							message: '请选择结婚日期'
						},
						{
							require: true,
							key: 'spouse_birth_year',
							message: '请选择出生日期'
						},
						{
							require: true,
							key: 'spouse_birth_time',
							message: '请选择出生日期时间'
						},
						
					], this.form)
					// {
					// 	require: true,
					// 	key: 'spouse_avatar',
					// 	message: '请上传头像'
					// }
					if(this.genealogy.sex === 1) {
						if(this.form.spouse_avatar === '') {
							uni.showToast({
								url:'请上传头像',
								icon: 'none'
							})
							return
						}
					}
					let data = {
						...this.form,
						id: this.id,
						type: 3,
						genealogy_id: this.genealogy.genealogy_id
					}
					uni.showLoading()
					genealogyDataUpdateHttp(data).then(res=>{
						uni.hideLoading()
						uni.showToast({
							title:"提交成功",
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
						
					})
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F1E7;
	}

	.form {
		width: 670rpx;
		margin: 0 auto;
		padding: 30rpx 0;
		padding-bottom: 30rpx;

		.form-item {
			width: 100%;
			margin-bottom: 57rpx;

			.form-item-label {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				margin-bottom: 30rpx;

				text {
					color: #e4393c;
				}

				.form-item-label-subTitle {
					color: #999999;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}

			.form-item-rig {
				width: 100%;

				.form-item-input {
					width: 100%;
					height: 84rpx;
					background: #D9CEBC;
					border-radius: 10rpx;
					box-sizing: border-box;
					padding: 0 30rpx;
					display: flex;
				
					input {
						min-width: 0;
						flex: 1;
						height: 100%;
				
						align-items: center;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #000;
				
					}
				
					.input-ac {
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #84643B;
					}
				}

				.Cover {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.Cover-item {
						width: 156rpx;
						height: 212rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						border: 1px solid #D9CEBC;
						box-sizing: border-box;
						padding: 20rpx 15rpx;
						position: relative;

						.Cover-item-tx {
							width: 16rpx;
							position: absolute;
							right: 32rpx;
							bottom: 88rpx;
							height: 90rpx;
							overflow: hidden;

							view {
								height: 82rpx;
								font-family: FZXuanZhenZhuanBianS-R-GB;
								font-weight: 400;
								font-size: 16rpx;
								color: #2B3858;
								height: fit-content;
							}
						}
					}

					.Cover-item-ac {
						background: #D9CEBC;
						border-radius: 8rpx;
						border: 1px solid #84643B;
					}
				}

				.form-item-rig-textareaImg {
					width: 100%;
					background: #D9CEBC;
					border-radius: 10rpx;
					box-sizing: border-box;
					padding: 30rpx 29rpx 19rpx;

					textarea {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(132, 100, 59, 0.5);
						height: 140rpx;
						margin-bottom: 10rpx;
					}

					.textarea-ac {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #84643B;
					}

					.form-item-rig-textareaImg-img {
						width: 100%;

						.form-item-rig-textareaImg-img-add {
							width: 174rpx;
							height: 174rpx;
							background: #D9CEBC;
							border-radius: 10rpx;
							border: 1px solid #84643B;
							flex-direction: column;

							image {
								width: 37rpx;
								height: 29rpx;
								margin-bottom: 30rpx;
							}

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #84643B;
						}

						&>image {
							width: 174rpx;
							height: 174rpx;
							border-radius: 10rpx;
						}
					}
				}

				.form-item-rig-upload {
					width: 100%;

					.form-item-rig-upload-add {
						width: 174rpx;
						height: 174rpx;
						background: #D9CEBC;
						border-radius: 10rpx;
						border: 1px solid #84643B;
						flex-direction: column;

						image {
							width: 37rpx;
							height: 29rpx;
							margin-bottom: 30rpx;
						}

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #84643B;
					}

					&>image {
						width: 174rpx;
						height: 174rpx;
						border-radius: 10rpx;
					}
				}

				.form-item-rig-more {
					width: 100%;
					display: flex;
					background: #D9CEBC;
				}

				.development {
					width: 100%;
					position: relative;

					.development-list {
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 30rpx;

						.development-l {
							width: 120rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 36rpx;
							color: #84643B;
							margin-right: 30rpx;
							position: relative;

							input {
								background: #EFE9DD;
								border-radius: 8rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(132, 100, 59, 0.5);
								width: 63%;
								padding: 10rpx;
							}

							.development-l-ac {
								color: #84643B;
								font-size: 19rpx;
							}
						}

						.development-l::after {
							width: 12rpx;
							height: 12rpx;
							background: #FFFFFF;
							border-radius: 50%;
							border: 1px solid #84643B;
							content: "";
							position: absolute;
							right: -6rpx;
							top: calc(50% - 10rpx);
							transform: rotateY(-50%);
							margin: auto;
							z-index: 9;
						}

						.development-r {
							width: 388rpx;
							background: #EFE9DD;
							border-radius: 8rpx;
							box-sizing: border-box;
							padding: 15rpx 23rpx;
							font-family: Source Han Sans CN;
							font-weight: 800;
							font-size: 24rpx;
							color: #666666;
							display: flex;

							input {
								font-size: 24rpx;
							}
						}
					}
				}

				.development::after {
					width: 1rpx;
					height: 100%;
					position: absolute;
					content: "";
					left: 118rpx;
					top: 0;
					background: #84643B;
				}
			}
		}
	}

	.form-btn {
		width: 580rpx;
		height: 99rpx;
		background: #84643B;
		border-radius: 50rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}
	.form-item-rig-more {
		width: 100%;
		display: flex;
		background: #D9CEBC;
	
		&>div {
			flex: 1;
			min-width: 0;
			background: red;
		}
	}
</style>